<template>
  <div
    class="diy-search"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <div
      v-if="diyItem.layout.value == 1"
      class="layout-1"
      :style="[
        `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
        `background:${
          diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
        }`,
        `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
      ]"
      :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
    >
      <div
        class="diy-search-box"
        :style="{
          background: diyItem.style.search_bg,
          borderRadius: diyItem.style.search_radius + 'px',
        }"
      >
        <div class="diy-search-text" :style="textStyles">
          {{ diyItem.style.title }}
        </div>
        <span
          class="icon icon-sousuo"
          :style="{ color: diyItem.style.color }"
        ></span>
      </div>
    </div>
    <div
      v-if="diyItem.layout.value == 2"
      class="layout-2"
      :style="[
        `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
        `background:${
          diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
        }`,
        `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
      ]"
      :class="diyItem.style.shade == 1 ? 'style-shade' : ''"
    >
      <div
        :style="{ backgroundImage: 'url(' + diyItem.style.icon + ')' }"
        class="img"
      ></div>
      <div
        class="diy-search-box"
        :style="{
          background: diyItem.style.search_bg,
          borderRadius: diyItem.style.search_radius + 'px',
        }"
      >
        <div class="diy-search-text" :style="textStyles">
          {{ diyItem.style.title }}
        </div>
        <span
          class="icon icon-sousuo"
          :style="{ color: diyItem.style.color }"
        ></span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "storeDiyPreviewSearch",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance, computed, StyleValue } from "vue";
import { diySearchDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem: diySearchDataType;
    index: number | string;
  }>(),
  {
    diyItem: () => {
      return {
        layout: {
          value: 1,
        },
        style: {
          title: "",
          layout: 1,
          icon: "",
          color: "#000000",
          search_position: "center",
          search_bg: "#f0f0f0",
          search_radius: 0,
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
      };
    },
    index: 0,
  }
);

const textStyles = computed<StyleValue>(() => {
  return [
    `text-align: ${props.diyItem.style.search_position}`,
    `color: ${props.diyItem.style.color}`,
  ];
});
</script>

<style scoped>
/*搜索*/
.diy-search .layout-1 .diy-search-box {
  padding: 10px;
  position: relative;
  height: 16px;
  line-height: 16px;
  width: calc(100% - 20px);
}

.diy-search .layout-1 .diy-search-box .icon {
  position: absolute;
  right: 10px;
  line-height: 16px;
  top: 10px;
}
.diy-search .layout-1 .diy-search-box .diy-search-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.diy-search .layout-2 {
  display: flex;
}
.diy-search .layout-2 .img {
  width: 85px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}
.diy-search .layout-2 .diy-search-box {
  padding: 10px;
  position: relative;
  height: 16px;
  line-height: 16px;
  width: calc(100% - 20px);
}

.diy-search .layout-2 .diy-search-box .icon {
  position: absolute;
  right: 10px;
  line-height: 16px;
  top: 10px;
}
.diy-search .layout-2 .diy-search-box .diy-search-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>